.web-button {
  box-shadow: $box-shadow-base;
  transition: all 0.4s;
  color: $white-color;
  cursor: pointer;
  &.default {
    background-color: $white-color;
    border: 1px solid $border-color-base;
    color: $text-color;
  }
  &.danger {
    background-color: $danger-color;
    border: 1px solid $danger-color;
  }
  &.primary {
    background-color: $primary-color;
    border: 1px solid $primary-color;
  }
  &.success {
    background-color: $success-color;
    border: 1px solid $success-color;
  }
  &.warning {
    background-color: $warning-color;
    border: 1px solid $warning-color;
  }
  &.info {
    background-color: $info-color;
    border: 1px solid $info-color;
  }

  // size-------------
  &.large {
    padding: $padding-lg;
    font-size: $size-lg;
    border-radius: $radius-lg;
  }
  &.medium {
    padding: $padding-md;
    font-size: $size-md;
    border-radius: $radius-md;
  }
  &.small {
    padding: $padding-sm;
    font-size: $size-sm;
    border-radius: $radius-sm;
  }
  // round-----------------
  &.round {
    border-radius: 20px;
  }
  // block--------------------
  &.block {
    display: block;
    width: 100%;
  }
  // disabled---------------
  &.disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
  &:hover {
    opacity: 0.8;
  }
}

.web-button:hover::before {
  width: 120%;
}
